<template>
<div>
    <el-form ref="form" :model="form" label-width="80px">
    <el-row>
     
        <el-col :span="16" style="margin-left:10px;" >
            <div class="container" style="min-height:70%;">
                <h3>{{bumen}}</h3>  
                <el-tabs v-model="activetabs">
                    <el-tab-pane label="生产追溯系统" name="生产追溯系统"> 
                        <el-checkbox-group v-model="checked" style="margin-top:20px;" >
                            <div v-for="(item,index) in list" :key="index" v-if="index > 10" class="checkbox-content" >
                                <el-checkbox  :label="item.id"  @change="handlecheckbox1(index)">{{item.name}}</el-checkbox>
                                <el-checkbox-group v-model="checked" class="checked-right" style="margin-top:20px; display:inline-block;">
                                    <el-checkbox v-for="(s,sindex) in item.children" @change="handlecheckbox(sindex)"  :key="sindex" :label="s.id">{{s.name}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-checkbox-group>
                    </el-tab-pane>          
                    <el-tab-pane label="系统设置" name="系统设置">
                        <el-checkbox-group v-model="checked" style="margin-top:20px;" >
                            <div v-for="(item,index) in list" :key="index" v-if="index < 11" class="checkbox-content" >
                                <el-checkbox  :label="item.id"  @change="handlecheckbox1(index)">{{item.name}}</el-checkbox>
                                <el-checkbox-group v-model="checked" class="checked-right" style="margin-top:20px; display:inline-block;">
                                    <el-checkbox v-for="(s,sindex) in item.children" @change="handlecheckbox(sindex)"  :key="sindex" :label="s.id">{{s.name}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-checkbox-group>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-col>  
    </el-row>
   <el-form-item class="footerFixed">
        <el-button type="primary" @click="menu_save">提交</el-button>
    </el-form-item>
    </el-form>
</div>
 
</template>

<script>
    import {permission_save,permission_delete,jurisdiction_saveuser,jurisdiction_user,jurisdiction_staff,staffuser_findByAll,company_findById,jurisdiction,jurisdiction_saveMenu,jurisdiction_getMenu} from '@/request/api'
    export default {
        inject:['reload'],
        data() {
            return {
                activetabs:'生产追溯系统',
                userList:'',
                searchName:'',
                activeName:'组织架构',
                form:{},
                disabled:true,
                list:[],
                checked:[],
                checkeds:[],
                shangji:'',
                bumen:'',
                defaultProps:{
                    children:'',
                    label:'label'
                },
                // activeName: '1',
                tableData: [],
                // form:{
                //     name:'',
                //     parentId:'',
                // },
                data: [],
                isShow:true,
                delid:'',
                departmentId:'',
                customProps:{
                    label:'name',
                    children:'children',
                    id:'id'
                },
            };
        },
        mounted(){
            this.init()
            this.init1()
            this.init2()
        },
        methods: {
            handlestaff(index){
                this.bumen = this.userList[index].name
                this.id = this.userList[index].id
                jurisdiction_user(this.userList[index].id).then((res)=>{
                    var str = res.data
                    var arr = []
                    for (let i = 0; i < str.length; i++) {
                        arr.push(str[i].menuId)
                    }
                    this.checked = arr
                })
            },
            handleClick(){

            },
            searchstaff(){
                this.init2()
            },
            handleSearch(){
                this.init2()
            },
            init2(){
                jurisdiction_staff("?name="+this.searchName).then((res)=>{
                    this.userList = res.data
                    for (let i = 0; i < this.userList.length; i++) {
                       this.userList[i].username = this.userList[i].username.substring(0,1)
                        
                    }
                })
            },
            init1(){
                var id = localStorage.getItem("companyId")
                company_findById(id).then((res)=>{
                    this.data.push({id:res.data.id,name:res.data.name,children:[]})
                    this.bumen = res.data.name
                    this.departmentId = res.data.id
                    staffuser_findByAll("").then((res)=>{
                        this.data[0].children = res.data
                    })
                })
            },
            getMenu(){
                jurisdiction_getMenu(this.delid).then((res)=>{
                     var str = res.data
                    var arr = []
                    for (let i = 0; i < str.length; i++) {
                        arr.push(str[i].menuId)
                    }
                    this.checked = arr
                })
            },
            menu_save(){
				// permission_delete(this.checked[0]).then((res)=>{
				//     this.init()
				//     this.checked = []
				//     alert(1)
				// })
                var data = {
                    type:'FUNC',
                    menuName:'新建发送',
                    parentId:'2c96801c754f31b901754fb52fe20012',
                    sortNum:'1'
                }
                permission_save(data).then((res)=>{
                    alert(1)
                    this.init()
                })

            },
            handlecheckbox(index,sindex){
                
            },
            handlecheckbox1(index){

            },
            init(){
                jurisdiction("").then((res)=>{
                    this.list = res.data
                })
            },
 
            handleNodeClick(ele){

                this.bumen = ele.name
                var id = localStorage.getItem("companyId")
                // if(ele.id == id){
                //     this.delid = ""
                // }else{
                    this.delid = ele.id
                // }
                this.getMenu() 
            }, 
        }
    }
</script>

<style scoped>
.name-circle{
    width:25px;
    line-height:25px;
    text-align: center;
    height:25px;
    border-radius: 50%;
    background:red;
    display: inline-block;
}
.staffuser{
    font-size:12px;
    height:35px;
    line-height:35px;
    cursor: pointer;
}
.staffcontent{
    margin-top:20px;
    height:300px;
    overflow-y: auto;
}
.checked-right{
    position: absolute;
    left:150px;
    top:-12px;
}
.checkbox-content{
    height:30px;
    line-height:30px;
    position: relative;
    border: 1px solid #dcdfe6;
    padding:8px;
}
.el-row{ margin-bottom: 20px;}
.el-pagination{
    text-align: center;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
}
</style>